<template>
	<view class="page-container">
		<u-navbar :placeholder="true">
			<view class="flex align-center" slot="left">
				<u-icon name="close" @click="goHome"></u-icon>
			</view>
			<view class="flex align-center" slot="center">
				<u-icon name="arrow-down" label="预约看板" labelPos="left" @click="showMenu=true"></u-icon>
			</view>
		</u-navbar>
		<u-sticky :offset-top="statusBarHeight + 44">
			<view class="bg-white">
				<date-tabs 
					:value.sync="date" 
					@change="onDateTabsChange" 
					color="#e54d42" 
					bgColor="rgba(255, 0, 0, 0.1)"
					startDate="2021-01-01">
				</date-tabs>
				<view class="padding-20 flex justify-center">
					<view><u-icon name="info-circle-fill" color="#e54d42" label="客户新增"></u-icon></view>
					<view class="ml-20"><u-icon name="info-circle-fill" color="#2979ff" label="员工新增"></u-icon></view>
				</view>
			</view>
		</u-sticky>
		<portrait-table 
			:tableData="tableData" 
			:title="tableColumn" 
			align="center" 
			titleBg="#eee"
			@click-row="goDetails">
		</portrait-table>
		<u-popup
			:show="showMenu"
			@close="showMenu=false"
		>
			<view class="padding-20 pb-0 flex justify-around">
				<view class="width-160 height-160 border-radius-20 bg-gray flex justify-center align-center">
					<u-icon name="list-dot" label="预约列表" labelPos="bottom" size="32" @click="onRou"></u-icon>
				</view>
				<view class="width-160 height-160 border-radius-20 bg-red-light flex justify-center align-center">
					<u-icon name="grid-fill" label="预约看板" labelPos="bottom" size="32" color="#e54d42" labelColor="#e54d42" @click="showMenu=false"></u-icon>
				</view>
			</view>
		</u-popup>
		<uni-fab
			:popMenu="false" 
			ref="fab" 
			horizontal="right" 
			:pattern="pattern"
			@fabClick="$u.route('/pages/shop/Reservation/add')"
		/>
	</view>
</template>

<script>
	import PortraitTable from '@/components/portrait-table/portrait-table.vue'
	export default {
		components: {
			PortraitTable
		},
		data () {
			return {
				showMenu: false,
				date:'',
				tableColumn:[],
				tableData:[],
				statusBarHeight: 0,
				pattern: { buttonColor :'#e54d42' }
			}
		},
		onLoad() {
			// this.getPageList(this.date)
			const that = this
			uni.getSystemInfo({
			  success: function (res) {
			   that.statusBarHeight = res.statusBarHeight
			  }
			})
			uni.$on('upResList', opt=>{
				this.getPageList(this.date)
			})
		},
		onUnload(){
			uni.$off('upResList')
		},
		methods: {
			goDetails(id){
				uni.$u.route('/pages/shop/Reservation/detail', {id: id})
			},
			getPageList(date){
				this.$reqJsonPost('GetBoardPageList', {date:date}).then(res=>{
					this.tableColumn = res.data.title.map((im, ix)=>{
						return {
							label: im['time_' + ix],
							value: `time_${ix}`
						}
					})
					this.tableColumn.unshift({label: '', value: 'staffName'})
					this.tableData = res.data.data
					// .map(({staffId, ...rest})=>rest)
				})
			},
			onDateTabsChange(e){
				this.getPageList(e.dd)
			},
			onRou(){
				this.showMenu = false
				uni.$u.route('/pages/shop/Reservation/list')
			},
			goHome(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .page-container{
	// 	overflow: hidden;
	// 	-webkit-overflow-scrolling: touch;
	// }
</style>